<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    title:<input type="text">
    <button onclick="add()">添加</button>
    <table border="1px" style="text-align: center;">
        <thead>
            <tr>
                <td>房屋id</td>
                <td>房屋标题</td>
                <td>房屋描述</td>
                <td>房屋价格</td>
                <td>房屋面积</td>
                <td>卧室数量</td>
                <td>卫生间数量</td>
                <td>房屋地址</td>
                <td>城市</td>
                <td>省份/州</td>
                <td>邮政编码</td>
                <td>国家</td>
                <td>纬度</td>
                <td>经度</td>
                <td>建造年份</td>
                <td>房屋类型</td>
                <td>产权信息</td>
                <td>配套设施</td>
                <td>房屋状态</td>
                <td>创建时间</td>
                <td>更新时间</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        //获取
        function apply() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:3000/users",
                dataType: "json",
                success: (a) => {
                    $("tbody").html("")
                    a.data.forEach(item => {
                        $("tbody").append(`
                         <tr>
                <td>${item.house_id}</td>
                <td>${item.title}</td>
                <td>${item.description}</td>
                <td>${item.price}</td>
                <td>${item.area}</td>
                <td>${item.bedrooms}</td>
                <td>${item.bathrooms}</td>
                <td>${item.address}</td>
                <td>${item.city}</td>
                <td>${item.state}</td>
                <td>${item.zip_code}</td>
                <td>${item.country}</td>
                <td>${item.latitude}</td>
                <td>${item.longitude}</td>
                <td>${item.construction_year}</td>
                <td>${item.property_type}</td>
                <td>${item.ownership}</td>
                <td>${item.amenities}</td>
                <td>${item.status}</td>
                <td>${item.created_at}</td>
                <td>${item.updated_at}</td>
                <td><button onclick="dele(${item.house_id})">删除</button></td>
            </tr>
`)
                    });
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
        apply()
    </script>
    <script>
        //添加
        function add() {
            $.ajax({
                type: "POST",
                url: "http://127.0.0.1:3000/add",
                data: {
                    title: $("input").eq(0).val(),
                },
                dataType: "json",
                success: (a) => {
                    apply()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
    <script>
        //删除
        function dele(id) {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:3000/del?house_id=" + id,
                dataType: "json",
                success: (a) => {
                    apply()
                },
                error: (e) => {
                    console.log(e);
                }
            })
        }
    </script>
</body>

</html>